import { _decorator, Component, Node, Label, Button, v3, Vec3 } from 'cc';
import { BasePanel } from '../../../../scripts/libs/ui/BasePanel';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { DevConfig, ItemKey, ItemParam } from '../../../../scripts/managers/DevConfig';
import { udm } from '../../../../scripts/managers/UserDataManager';
import { thinking_sdk_m } from '../../../../scripts/managers/SDK/ThinkingCocosSDKManager';
import { lm } from '../../LobbyManager';
import { forkJoin, Observable, of } from 'rxjs';
import { i18n } from '../../../../scripts/i18n';
import { gm } from '../../../../scripts/managers/GameManager';
import { SpriteFrame } from 'cc';
import { Sprite } from 'cc';
import { TweenToStart } from '../../../../scripts/libs/rxjs/cc3/TweenStart';
const { ccclass, property } = _decorator;

@ccclass('ItemUnlockPanel')
export class ItemUnlockPanel extends BasePanel {

    itemKey = ReactiveProperty.Create<ItemKey>(null);

    @property(Node)
    mainNode: Node = null;

    @property(Label)
    contentLabel: Label = null;

    @property(Button)
    closeButton: Button = null;

    @property(SpriteFrame)
    titleSpriteFrame: SpriteFrame[] = []

    @property(SpriteFrame)
    imgSpriteFrame: SpriteFrame[] = []

    @property(SpriteFrame)
    iconSpriteFrame: SpriteFrame[] = []

    @property(Sprite)
    titleSprite: Sprite = null;

    @property(Sprite)
    imgSprite: Sprite = null;

    @property(Sprite)
    iconSprite: Sprite = null;

    @property(Sprite)
    buttonIconSprite: Sprite = null;

    private typeData = {
        'swapper': 0,
        'magnet': 1,
        'balloon': 2
    }

    willBind(): void {
        lm.pausePanelOpened.value = true;
        // this.adaptive();
        this.mainNode.setScale(.5, .5, .5);
    }

    useObserves() {
        return [
            this.itemKey.subscribe(this.refresh.bind(this)),
            BindButton(this.closeButton).subscribe(this.closeButtonClicked.bind(this))
        ];
    }

    // adaptive() {
    //     this.mainNode.setScale(v3(Vec3.ONE).multiplyScalar(lm.getAdaptiveScale()));
    // }

    openPanelAnim(): Observable<any> {
        return forkJoin([
            TweenToStart(this.ensureUIOpacity(), .2, { opacity: 255 }, { easing: 'expoOut' }),
            TweenToStart(this.mainNode, .4, { scale: lm.getAdaptiveScaleV3() }, { easing: 'backOut' }),
        ]);
    }

    closePanelAnim(): Observable<any> {
        this.ensureUIOpacity();
        return forkJoin([
            TweenToStart(this.ensureUIOpacity(), .2, { opacity: 0 }, { easing: 'expoIn' }),
            TweenToStart(this.mainNode, .2, { scale: v3(.5, .5, .5) }, { easing: 'backIn' }),
        ]);
    }

    willOpen(): Observable<string> {
        gm.itemAnimatingFlags.add('unlock');
        let itemRx = udm.getItemRx(this.itemKey.value);
        itemRx.value++;
        udm.passedFlags.value.add(`unlock_${this.itemKey.value}`)
        udm.save();
        thinking_sdk_m.requestTrack('Item_Get', {
            ItemType: this.itemKey.value,
            CType: 'Guide',
            UseType: 'Free',
            ItemNum: DevConfig.ITEM_PARAM[this.itemKey.value].init_count,
            ItemAll: itemRx.value,
            Level_ID: udm.stageNum.value,
            IsNew: udm.isNew.value,
            Booster_Itemdetail: `Swapper:${udm.itemSwapper.value}|Magnet:${udm.itemMagnet.value}|Balloon:${udm.itemBalloon.value}`
        });
        return of(null);
    }

    onDestroyView(): void {
        lm.pausePanelOpened.value = false;
    }

    refresh() {
        if (this.itemKey.value == null) return;
        // let param = DevConfig.ITEM_PARAM[this.itemKey.value] as ItemParam;
        // this.contentLabel.string = `${i18n.t(`item.${this.itemKey.value}.name`)}\n${i18n.t(`item.${this.itemKey.value}.desc`)}`;
        this.contentLabel.string = `${i18n.t(`item.${this.itemKey.value}.desc`)}`;
        this.titleSprite.spriteFrame = this.titleSpriteFrame[this.typeData[this.itemKey.value]]
        this.imgSprite.spriteFrame = this.imgSpriteFrame[this.typeData[this.itemKey.value]]
        this.iconSprite.spriteFrame = this.iconSpriteFrame[this.typeData[this.itemKey.value]]
        this.buttonIconSprite.spriteFrame = this.iconSpriteFrame[this.typeData[this.itemKey.value]]
    }

    closeButtonClicked() {
        gm.itemAnimatingFlags.delete('unlock');
        ItemUnlockPanel.CloseProcess(null, 'close');
    }

}

